<!-- 首页分类-->
<template>
    <div class="homeentry">
        <div class="menu" @mouseleave="cateid=null">
            <ul class="menulist">
                <li v-for="(item,key) in catemenu" :key="item.id" @mouseenter="index=key;cateid=item.id" :class="{active:item.id==cateid}">
                    <router-link to="/category">{{item.name}}</router-link>
                    <template v-if="item.children">
                        <router-link to="/" v-for="it in item.children" :key="it.id">{{it.name}}</router-link>
                    </template>
                    <template v-if="!item.children">
                        <skeleon-view width="45px" height="12px"></skeleon-view>
                        <skeleon-view width="45px" height="12px"></skeleon-view>
                    </template>
                </li>
            </ul>
            <div class="showcate">
                <h4>{{categoods&&categoods.keys=='cate'?'分类推荐':'品牌推荐'}}<small>根据您的购买或浏览记录推荐</small></h4>
                <ul v-if="categoods&&categoods.keys=='cate'">
                    <li v-for="i in categoods.goods" :key="i.id">
                        <router-link to="/">
                            <!-- <img :src="i.picture" alt=""> -->
                            <img src="" alt="" v-lazy="i.picture">
                            <div class="info">
                                <p class="name ellipsis-2">{{i.name}}</p>
                                <p class="desc ellipsis">{{i.desc}}</p>
                                <p class="price"><i>￥</i>{{i.price}}</p>
                            </div>
                        </router-link>
                    </li>
                </ul>
                <ul v-if="categoods&&categoods.keys=='brand'">
                    <li v-for="i in categoods.goods" :key="i.id">
                        <router-link to="/">
                            <!-- <img :src="i.picture" alt=""> -->
                            <img src="" alt="" v-lazy="i.picture">
                            <div class="info">
                                <p class="place"><i class="iconfont icon-dingwei"></i>{{i.name}}</p>
                                <p class="name ellipsis-2">{{i.nameEn}}</p>
                                <p class="desc ellipsis">{{i.desc}}</p>
                            </div>
                        </router-link>
                    </li>
                </ul>
            </div>
        </div>
        <!-- {{categoods}} -->
        <home-swiper></home-swiper>
    </div>
</template>

<script>
import {getBrand} from '@/utils/api/homeapi'
import HomeSwiper from './HomeSwiper.vue'
export default {
    components: { HomeSwiper },
        data(){
            return{
                index:0,
                brandlist:[],
                cateid:0,
                bannerlist:[]
            }
        },
        computed:{
            catemenu(){
                let obj={
                    id:'brandid',
                    name:"品牌",
                    children:[
                        {
                            id:"brandidid",
                            name:'品牌推荐'
                        }
                    ]
                }
                let list= this.$store.state.category.cate.map(item=>{
                    return {
                        id:item.id,
                        name:item.name,
                        children:item.children&&item.children.slice(0,2)
                    }
                })
                list.push(obj)
                return list
            },
            categoods(){
                let obj={
                    keys:'',
                    goods:[]
                }
                // console.log(this.index);
                if(this.index<=8){
                    // 分类数据
                    obj.keys='cate'
                    obj.goods=this.$store.state.category.cate[this.index].goods
                }else{
                    //拿brand的数据
                    obj.keys='brand'
                    obj.goods=this.brandlist
                }
                // console.log(this.$store.state.category.cate);
                return obj
            }
        },
        methods:{
            async getBrandList(){
                let res=await getBrand(6)
                this.brandlist=res.result
            },
        },
        mounted(){
            this.getBrandList()
        }
    }
</script>

<style scoped lang="scss">
@import '../../assets/css/variables.scss';
.active{
    background: $xtxColor;
}
.menu{
    width: 250px;
    height:  500px;
    background: rgba(0,0,0,0.8);
    position: relative;
    z-index: 99;
    .menulist{
        li{
            padding-left: 40px;
            height: 50px;
            line-height: 50px;
            &:hover{
                background: $xtxColor;
            }
            a{
                margin-right: 4px;
                color: #fff;
                &:first-child{
                    font-size: 16px;
                }
            }
        }
    }
}
.showcate{
    width: 990px;
    height: 500px;
    background: rgba(255,255,255,0.8);
    position: absolute;
    left: 250px;
    top: 0;
    display: none;
    padding: 0 15px;
    h4{
        font-size: 20px;
        font-weight: normal;
        line-height: 80px;
        small{
            font-size: 16px;
            color: #666;
        }
    }
    ul{
        display: flex;
        flex-wrap: wrap;
        li{
            width: 310px;
            height: 120px;
            margin-right: 15px;
            margin-bottom: 15px;
            border: 1px solid #eee;
            border-radius: 4px;
            background: #fff;
            &:nth-child(3n){
                margin-right: 0;
            }
            a{
                display: flex;
                width: 100%;
                height: 100%;
                align-items: center;
                padding: 10px;
                &:hover{
                    background: #e3f9f4;
                }
                img{
                    width: 95px;
                    height: 95px;
                }
                .info{
                    padding-left: 10px;
                    line-height: 24px;
                    width: 190px;
                    .name{
                        font-size: 16px;
                        color: #666;
                    }
                    .desc{
                        color: #999;
                    }
                    .price{
                        font-size: 22px;
                        color: $priceColor;
                        i{
                            font-size: 16px;
                        }
                    }
                }
            }
        }
    }
}
.menu:hover{
    .showcate{
        display: block;
    }
}
.homeentry{
    position: relative;
}
</style>